<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        li {
            width: 20%;
            height: 350px;
            list-style: none;
            float: left;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
            float: left;
        }

        .sfqBox {
            margin-left: 100px;
            margin-top: 100px;
            height: 300px;
            width: 600px;
        }
    </style>
    <script src="../../../jquery-js/jquery.js"></script>
    <script>
        $(function () {
            $('.sfqBox ul li').on({
                mouseover: function () {
                    $(this).siblings('li').css({width: '6%'});
                    $(this).css({width: '70%'})
                },
                mouseout: function () {
                    $('.sfqBox ul li').css({width: '20%'});
                }
            });
        });
    </script>
</head>
<body>
<div class="sfqBox">
    <ul>
        <li><img src="./img/sfq_1.jpg" alt=""></li>
        <li><img src="./img/sfq_2.jpg" alt=""></li>
        <li><img src="./img/sfq_3.jpg" alt=""></li>
        <li><img src="./img/sfq_4.jpg" alt=""></li>
        <li><img src="./img/sfq_5.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>